<template>
  <div class="page_body">
    <div class="main_userCenter_body">
      <div class="main_userCenter_top">
        <img
          src="../../assets/image/to_icon04.png"
          class="swiper_box_top_icon"
          @click="toCheckSystemFn()"
        />
        <img
          src="../../assets/image/user_center_bg01.png"
          class="main_userCenter_top_bg"
        />
        <div class="main_userCenter_top_content">
          <div class="top_content_img_box">
            <img
              v-if="userData.avatarurl == '' || userData.avatarurl == null"
              class="top_content_img"
              src="../../assets/image/base_user_img01.png"
              alt="头像"
            />
            <img
              class="top_content_img"
              v-else
              :src="userData.avatarurl"
              alt="头像"
            />
          </div>
          <div class="top_content_name_box">
            <div class="top_content_name">{{ userData.name }}</div>
            <div class="top_content_phone">{{ phoneShow }}</div>
          </div>
        </div>
      </div>

      <div class="main_userCenter_btn_list">
        <div class="main_userCenter_btn_item">
          <div class="main_userCenter_btn_item_title">
            <img
              class="main_userCenter_btn_item_title_img"
              src="../../assets/image/user_center_btn_icon01.png"
              style="width: 0.36rem; margin-right: 0.23rem"
            />
            <div class="main_userCenter_btn_item_title_name">我的报名</div>
          </div>
          <img
            :class="[
              enrollShow
                ? 'main_userCenter_btn_item_icon item_show_icon'
                : 'main_userCenter_btn_item_icon',
            ]"
            src="../../assets/image/to_icon05.png"
            @click="changeEnrollShow()"
          />
          <div
            :class="[
              enrollShow
                ? 'main_userCenter_btn_item_btn_list enroll_show'
                : 'main_userCenter_btn_item_btn_list',
            ]"
          >
            <div class="enroll_list_item" @click="toOther()">
              <img
                class="enroll_list_item_icon"
                src="../../assets/image/main_user_center_icon01.png"
                style="width: 0.62rem; margin-bottom: 0.25rem"
              />
              <div class="enroll_list_item_name">青少年报名</div>
            </div>
            <div class="enroll_list_item" @click="torefereeEnroll()">
              <img
                class="enroll_list_item_icon"
                src="../../assets/image/main_user_center_icon02.png"
                style="width: 0.48rem; margin-bottom: 0.24rem"
              />
              <div class="enroll_list_item_name">裁判员报名</div>
            </div>
            <div class="enroll_list_item" @click="toCoachEnroll()">
              <img
                class="enroll_list_item_icon"
                src="../../assets/image/main_user_center_icon03.png"
                style="width: 0.77rem; margin-bottom: 0.28rem"
              />
              <div class="enroll_list_item_name">教练员报名</div>
            </div>
          </div>
        </div>

        <div class="main_userCenter_btn_item">
          <div class="main_userCenter_btn_item_title">
            <img
              class="main_userCenter_btn_item_title_img"
              src="../../assets/image/user_center_btn_icon03.png"
              style="width: 0.42rem; margin-right: 0.2rem"
            />
            <div class="main_userCenter_btn_item_title_name">我的信息</div>
          </div>
          <img
            :class="[
              userInfoShow
                ? 'main_userCenter_btn_item_icon item_show_icon'
                : 'main_userCenter_btn_item_icon',
            ]"
            src="../../assets/image/to_icon05.png"
            @click="changeUserInfoShow()"
          />
          <div
            :class="[
              userInfoShow
                ? 'main_userCenter_btn_item_btn_list userInfo_show'
                : 'main_userCenter_btn_item_btn_list',
            ]"
          >
            <div class="userInfo_list_item" @click="toBaseViewFn()">
              <img
                class="userInfo_list_item_icon"
                src="../../assets/image/user_info_icon01.png"
                style="width: 0.47rem; margin-bottom: 0.1rem"
              />
              <div class="userInfo_list_item_name">基本信息</div>
            </div>

            <div class="userInfo_list_item" @click="toRegistrationViewFn()">
              <img
                class="userInfo_list_item_icon"
                src="../../assets/image/user_info_icon02.png"
                style="width: 0.52rem; margin-bottom: 0.06rem"
              />
              <div class="userInfo_list_item_name">注册信息</div>
            </div>

            <div class="userInfo_list_item" @click="toVipViewFn()">
              <img
                class="userInfo_list_item_icon"
                src="../../assets/image/user_info_icon03.png"
                style="width: 0.52rem; margin-bottom: 0.02rem"
              />
              <div class="userInfo_list_item_name">会员信息</div>
            </div>

            <div class="userInfo_list_item" @click="toOther()">
              <img
                class="userInfo_list_item_icon"
                src="../../assets/image/user_info_icon04.png"
                style="width: 0.47rem; margin-bottom: 0.06rem"
              />
              <div class="userInfo_list_item_name">青少年信息</div>
            </div>
          </div>
        </div>

        <div class="main_userCenter_btn_item" @click="toHonorFn()">
          <div class="main_userCenter_btn_item_title">
            <img
              class="main_userCenter_btn_item_title_img"
              src="../../assets/image/user_center_btn_icon02.png"
              style="width: 0.41rem; margin-right: 0.21rem"
            />
            <div class="main_userCenter_btn_item_title_name">我的荣誉</div>
          </div>
          <img
            class="main_userCenter_btn_item_icon"
            src="../../assets/image/to_icon05.png"
          />
        </div>

        <div class="main_userCenter_btn_item">
          <div class="main_userCenter_btn_item_title">
            <img
              class="main_userCenter_btn_item_title_img"
              src="../../assets/image/user_center_btn_icon04.png"
              style="width: 0.4rem; margin-right: 0.22rem"
            />
            <div class="main_userCenter_btn_item_title_name">关于我们</div>
          </div>
          <img
            class="main_userCenter_btn_item_icon"
            src="../../assets/image/to_icon05.png"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<style src="../../assets/css/user/mainUserCenter.css" scoped></style>

<script>
import { Toast } from "mint-ui";

export default {
  name: "MainUserCenter",
  components: {},
  data() {
    return {
      topTitle: "个人中心", // 顶部组件参数设置
      userInfoStatus: {
        is_complete: 1, // 是否完善信息 1：否 2：是
        is_referee_pay: 1, // 是否支付注册 0：否 1：是
        is_referee_register: 1, // 是否提交过注册信息 0：否 1：是
        is_referee_vip_register: 1, // 是否提交过会员注册信息 0：否 1：是
        referee_level: 0, // 裁判员等级
      },
      userData: {
        name: "",
        describe: "",
        avatarurl: "",
        phone: "",
      }, // 用户信息
      phoneShow: "",
      enrollShow: false, // 报名折叠显示
      userInfoShow: false, // 信息折叠显示
    };
  },
  created: function () {
    this.getUserDataFn();
    this.checkUserInfoFn();
  },
  methods: {
    // 查询用户数据
    getUserDataFn: function () {
      let that = this;
      let url = "/mobile/personalinfo";
      let data = {};
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            that.userData = response.userinfo;
            let be = response.userinfo.phone.substring(0, 3);
            let af = response.userinfo.phone.substring(
              9,
              response.userinfo.phone.length
            );
            that.phoneShow = be + "******" + af;
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 查询填写数据
    checkUserInfoFn: function () {
      let that = this;
      let url = "/mobile/checkUserInfo";
      let data = {};
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            that.userInfoStatus.is_complete = response.is_complete;
            that.userInfoStatus.is_referee_pay = response.is_referee_pay;
            that.userInfoStatus.is_referee_register =
              response.is_referee_register;
            that.userInfoStatus.is_referee_vip_register =
              response.is_referee_vip_register;
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 返回系统选择
    toCheckSystemFn: function () {
      this.$router.push({
        name: "ChecksyStem",
      });
    },
    // 查看基本信息
    toBaseViewFn: function () {
      if (this.userInfoStatus.is_complete == 2) {
        this.$router.push({
          name: "CoachImproveView",
        });
      } else {
        Toast({
          message: "暂未完善基本信息",
          duration: 3000,
        });
      }
    },
    // 查看注册信息
    toRegistrationViewFn: function () {
      if (this.userInfoStatus.is_referee_register == 1) {
        this.$router.push({
          name: "RefereeRegisterOrderList",
        });
      } else {
        Toast({
          message: "暂未进行注册,无法查看",
          duration: 3000,
        });
      }
    },
    // 查看会员信息
    toVipViewFn: function () {
      if (this.userInfoStatus.is_referee_vip_register == 1) {
        this.$router.push({
          name: "RefereeMemberView",
        });
      } else {
        Toast({
          message: "暂未进行会员注册,无法查看",
          duration: 3000,
        });
      }
    },
    // 裁判员报名
    torefereeEnroll: function () {
      this.$router.push({
        name: "RefereeEnrollHistoryList",
      });
    },
    // 教练员报名
    toCoachEnroll: function () {
      this.$router.push({
        name: "CoachEnrollHistoryList",
      });
    },
    // 我的荣誉
    toHonorFn: function () {
      if (this.userInfoStatus.is_complete == 2) {
        this.$router.push({
          name: "MyHonor",
          query: {
            source: "mainCenter",
          },
        });
      } else {
        Toast({
          message: "暂未完善信息,无法查看",
          duration: 3000,
        });
      }
    },
    // 切换报名折叠显示
    changeEnrollShow: function () {
      this.enrollShow = !this.enrollShow;
    },
    // 切换信息折叠显示
    changeUserInfoShow: function () {
      this.userInfoShow = !this.userInfoShow;
    },
    // 前往青少年
    toOther: function () {
      window.location.href = "https://shslqxh.1meeting.com";
    },
  },
};
</script>
